<template>
    <div class="page" v-if="show">
        <el-row>
            <el-row :gutter="20">
                <el-col :span="16" class="left">
                    <breadcrumb :bus="sbus"></breadcrumb>
                    <recList :bus="sbus"></recList>
                </el-col>
                <el-col :span="8" class="right hidden-sm-and-down">
                    <rank></rank>
                    <search :bus="sbus"></search>
                    <date :bus="sbus"></date>
                    <tags></tags>
                    <spread></spread>
                </el-col>
            </el-row>
        </el-row>
    </div>
</template>

<script>
    import Vue from 'vue'
    import recList from '@/components/recList'
    import rank from '@/components/rank'
    import tags from '@/components/tags'
    import spread from '@/components/spread'
    import search from '@/components/search'
    import date from '@/components/date'
    import breadcrumb from '@/components/breadcrumb'
    var bus = new Vue()
    export default{
        name: 'page_1',
        data () {
            return {
                show:true,
                msg: 'page_1',
                sbus:bus,
            }
        },
        methods:{

        },
        components: {
            'recList':recList,
            'rank':rank,
            'search':search,
            'tags':tags,
            'spread':spread,
            'date':date,
            'breadcrumb':breadcrumb
        }
    }
</script>

<style>
    .page{
        height: 100%;
        padding: 24px 57px;
    }
    .elem-quote{
        /*margin-bottom: 10px;*/
        padding: 15px;
        line-height: 22px;
        border-left: 5px solid #409eff;
        border-radius: 0 2px 2px 0;
        background-color: #f2f2f2;
    }
    hr{
        height: 1px;
        margin: 5px 0;
        border: 0;
        clear: both;
        background: #e6e6e6;
    }
</style>